<template>
	<uni-popup :ref="refName" type="bottom" @change="changePopup">
		<view class="select-index">
			<view class="all">
				<!-- <label class="all-select">
					<view>
						<checkbox :checked="allChecked" style="transform:scale(0.6)" />
					</view>
					<view>全选</view>
				</label> -->
			</view>
			<view class="select">
				<empty v-if="list.length == 0" :desc="desc" height="300"></empty>
				<checkbox-group v-else @change="checkboxChange">
					<label class="label" v-for="item in list" :key="item.value">
						<view>
							<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</checkbox-group>
			</view>
			<view class="footer">
				<button class="cancel" @click="$refs[refName].close()">取消</button>
				<button class="confire" @click="confireSelect">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import empty from "@/components/empty.vue";
	export default {
		components:{
			empty
		},
		data() {
			return {
				allChecked: false,
				refName: String(new Date().getTime()),
				select:[],
			}
		},
		props: {
			show: false,
			desc: {
				type: String,
				default: '还没有联系人'
			},
			list:{
				type:Array,
				default: []
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.showPopup();
				}
			},
		},
		methods: {
			changePopup(e) {
				this.$emit('changePopup', e.show)
			},
			checkboxChange(e){
				this.select = this.list.filter((item) => {
					return e.detail.value.indexOf(item.value.toString()) >= 0;
				});
			},
			showPopup() {
				this.$refs[this.refName].open();
			},
			confireSelect(){
				this.$emit('select',this.select);
				this.$refs[this.refName].close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.select-index {
		@include flex-c;
		background-color: #fff;
		height: 700rpx;
		padding: 30rpx 20rpx 0;
		.all {
			flex: 0 0 auto;
			padding: 20rpx 0;
			.all-select{
				@include flex-r-start-center;
			}
		}

		.select {
			flex: 1 0 0;
			overflow: auto;
			.label{
				@include flex-r-start-center;
				border-bottom: #e1e1e1 4rpx solid;
				line-height: 100rpx;
				&:last-child{
					border-bottom: none;
				}
			}
		}

		.footer {
			flex: 0 0 auto;
			padding: 24rpx 30rpx;
			@include flex-r-between-start;

			button {
				@include button;
				color: #fff;
				height: 60rpx;
				width: 45%;
				line-height: 60rpx;
				font-size: 28rpx;
			}

			.cancel {
				background-color: #bebebe;
			}

			.confire {
				background-color: #198AFA;
			}
		}
	}
</style>